<template>
	<view class="contain">
		<view class="search_box">
			<u-search @change="onChange" @custom="onCustom" shape="round" placeholder="查找地点" :clearabled="true" :showAction="true" actionText="取消"></u-search>
		</view>
		<view class="list" v-for="(item,index) in dataList" :key="index" @click="goMap(item)">{{item.Name}}</view>
	</view>
</template>

<script>
	import {
		GetBanners,
		GetArticledetail,
	} from '@/api/api.js';
	export default {
		data() {
			return {
				arrList:[],//数据源
				dataList:[],//联想词数据
			}
		},
		onLoad() {
			this.Getdata();
		},
		methods: {
			//点击对应的地点进入地图界面
			goMap(e){
				GetArticledetail({
					Id: e.LinkUrl
				}).then(res => {
					this.travelinfo = res.Data;
					uni.redirectTo({
						url: '../../guide_subpages/pointdetail/index?Id=' +this.travelinfo.Id + "&title=" + this
							.travelinfo.Title + "&room=1"
					})
				})
			},
			//输入框发生变化返回输入的值
			onChange(e){
				console.log(e)
				let arr = [];
				if(e!=''){
					this.arrList.forEach(con=>{
						if(con.Name.indexOf(e)!="-1"){
							arr.push(con)
						}
					})
				}else{
					arr = [];
				}
				this.dataList = arr;
			},
			//取消按钮返回上一级
			onCustom(){
				uni.navigateBack(1)
			},
			Getdata() {
				let that = this;
				GetBanners({
					ParentId: that.$category.api.travelTag,
					layers: 2
				}).then(res=>{
					console.log(res.Data)
					let arr = [];
					res.Data.forEach(con=>{
						if(con.Name!='热门景点'){
							con.Children.forEach(e=>{
								arr.push(e)
							})
						}
					})
					console.log(arr)
					this.arrList = arr;
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.contain {
		width: 100%;
		min-height: 100vh;
		padding: 4%;
		background-color: #fff;
	}

	.search_box {
		width: 100%;
		margin-bottom: 2%;
	}

	.list {
		padding: 3% 0;
		padding-left: 3%;
		border-bottom: 1px solid #ccc;
	}
</style>